<template>
    <div v-loading="loading1" style="background:white;width: 100%;height:100%;max-height:900px;overflow: auto;font-size:12px;margin-bottom:0px;" >
    <el-row >
      <el-col :span="24" style="border:0px">
        <div class="grid-content"  >
          <div style="text-align:center;margin:auto;font-size:30px">{{name}}</div>
        </div>
      </el-col>
    </el-row>
    
    <el-row style="margin-top:10px;">
      <el-col :span="6" style="height:30vh;display:flex;flex-direction:column;">
              <div  :style="{flex:1,backgroundSize:'90%',backgroundRepeat:'no-repeat',backgroundPosition: 'center center',backgroundImage:url}"></div>
            <!-- <img :src="img" style="backgroundRepeat:'no-repeat',backgroundPosition: 'center center',backgroundSize: 'cover'/> -->
            
          </el-col>

      <el-col :span="18"  style="display:grid; gap: 10px 10px; grid-template-columns: repeat(6, 1fr);text-align:center;">
        <div v-for="(item,index) in one" :key="index">
          <div style="text-align:center;align-items:center;align-content:center;justify-content: center; margin-bottom:20px " >
                  <div style="margin-bottom:15px;display:flex;width:100%;text-align:center;align-items:center;align-content:center;justify-content: center; ">
                    <div :style="{'align-content':'center',width:'85px',height:'38px',border: '1px solid black',color:getColorName(item)}">{{item.deviceName}}</div>
                  </div>
                  <div style="width:85px;height:110px;text-align:center;align-items:center;border-style:double;border-width:5px;border-color:black;text-wrap:wrap;margin:auto;font-size:13px">
                        <div style="margin-top:20px;display:flex;width:100%;text-align:center;align-items:center;align-content:center;justify-content: center; ">
                          <div style="width:70px;height:20px;line-height:20px;margin-top:10px;border: 1px solid white;align-content:center;background-color: #0E3170;font-weight: bolder;color:white;">{{item.remark}}</div>
                        </div>
                        <div style="margin-bottom:10px;margin-top:10px;display:flex;width:100%;text-align:center;align-items:center;align-content:center;justify-content: center; ">
                          <div > 单位： {{item.unit}}</div>
                        </div>
                    </div>
           </div>
        </div>
      </el-col>
    </el-row>
   

    <el-row style="margin-bottom:20px;margin-top:20px;padding:15px;">
      <el-col :span="10"  style="display:grid; grid-template-columns: repeat(2, 1fr);gap: 10px 10px;" >
        <div v-for="(item,index) in data.kaig" :key="index" >
            <div style="display:flex;margin-top:10px;justify-content: spaceAround; ">
                      <div  :style="{width:'50%',color:getColorName(item)}" >{{item.deviceName}}</div>
                      <div  style="margin-left:10px;width:30%;height:20px;line-height:20px;border: 1px solid white;align-content:center;background-color: #0E3170;font-weight: bolder;color:white;text-align:center;align-content:center" >{{item.remark}}</div>
                      <div style="margin-left:10px;"> {{item.unit}}</div>
            </div>
        </div>
       </el-col>
       <el-col :span="14" style="display:grid; grid-template-columns: repeat(3, 1fr);gap: 10px 10px;" >
        <div v-for="(item,index) in data.moni" :key="index" style="width:100%">
          <div style="display:flex;margin-left:10px;margin-top:10px;width:100%;text-align:center;justify-content: start;">
              <!-- <div class="circle"></div> -->
              <div :class="{'alarmDiv':getFlash(item) }"  :style="{'width':'20px','height':'20px','border-radius':'50%','background':getColor(item)}"></div>
              <div  :style="{'margin-left':'10px',color:getColorName(item)}" >{{item.deviceName}}</div>
          </div>
        </div>
       </el-col>
    </el-row>
</div>

</template>
<script>
// import deviceImg from '@/assets/images/5000_eleGroup.jpg'
import { mapState } from "vuex";
import {listDevs} from  "@/api/system/device";
export default {
name:"test",
async created(){
  //  console.log(222)
      let res= await this.getConfigKey("sys.server.version")
      this.version =res.msg||this.version;
      try{
        this.url='url(' +require('@/assets/images/'+this.version+'_emergencyB.jpg')+')'
      }catch(e){
        // this.url='url(' +require('@/assets/images/5000_eleGroup.jpg')+')'
      }
        this.dev= (this.type=="01")?this.dev_01:((this.type=='02')?this.dev_02:this.dev)
    this.name ="应急发电机组"
    this.init()
    if(null==this.timer){
      this.timer=  setInterval(() =>{
          this.init();
      },2000);
    }
},
beforeDestroy() {
if(this.timer){
  clearInterval(this.timer);
  this.timer=null;
}
},
methods:{

init(){
    listDevs({"deptId":this.deptId}).then(response=>{
        this.loading1=false
        // console.log(this.datas)
        let dataArr =response.data;
        // console.log(dataArr)
        if(dataArr){
            this.data.moni= dataArr.filter(item=>{
            return   "MR" == item.modality //开关量
            }).sort((a,b)=> {
            return a.systemId.split("-")[1]-b.systemId.split("-")[1]})
            this.data.kaig= dataArr.filter(item=>{
                return   "BA" == item.modality //开关量
            }).sort((a,b)=> {
                return a.systemId.split("-")[1]-b.systemId.split("-")[1]})

            this.devList=dataArr.filter(item=>{
                return this.arr.some(v=>item.systemId==v)
              
            }).sort((a,b)=> {
                return a.systemId.split("-")[1]-b.systemId.split("-")[1]})
          }
          
          this.one=dataArr.filter(item=>{
               return this.dev.includes(item.systemId)
            }).sort((a,b)=> {
                return a.systemId.split("-")[1]-b.systemId.split("-")[1]})


    })
},
getFlash(row){
//2、报警消息时，闪烁
let f = this.alarmList.some(alarm=>
    alarm ==row.deviceId
);
if(f){
  if(row.displayAlarm=="2"){//告警
    return true;
  }
}
if(this.lightSwitch=='1'  ||this.extExpSwitch=="1")
{//1、试灯打开
  console.log("extExpSwitch=="+this.extExpSwitch)
  if(row.displayAlarm=="2"){//告警
    return true;
  }
}
  return false;
},
getColorName(row){
//告警消息
if("2"== row.displayAlarm){
let f = this.alarmList.some(alarm=>
  alarm ==row.deviceId
);
if(f){
  return 'red';
}

 //3、显示设备状态颜色
 if(row.warnStatus=='1'||row.warnStatus=='0'){
    return 'black';
    }
    return 'red'
 
              
}
return "black";

},
getColor(row){
// console.log(row)

     if("2"== row.displayAlarm){  //告警类型
        //告警消息
        let f = this.alarmList.some(alarm=>
              alarm ==row.deviceId
            );
            if(f){//2、有报警通知，则显示灯的颜色
              return row.lightColor;
            }
        }
        if(this.lightSwitch=='1' ||this.extExpSwitch=="1"){//1、试灯打开，显示灯的颜色
          console.log("extExpSwitch=="+this.extExpSwitch)
            return row.lightColor;
        }
        //3、显示设备状态颜色
        if(row.warnStatus=='1'||row.warnStatus=='0'){
          return 'grey';
        }
        return row.lightColor;
}

},
computed:{
...mapState("app", {   // 对象形式
  alarmList: "alarmList",
  lightSwitch:"lightSwitch",
  extExpSwitch:"extExpSwitch"
})
},
data() {
    return{
            version:'5000',
            dev:['10M-001','10M-002','10M-003','10M-004','10M-005','10M-006'],
            dev_01:['07M-001','07M-002','07M-003','07M-004','07M-005','07M-007','07M-008'],
            dev_02:['08M-001','08M-002','08M-003','08M-004','08M-005','08M-007','08M-008'],
            loading1:true,
            url:"",
            title:(this.$route.query.type=='01')?"1号发电机组":(this.$route.query.type=='02')?'2号发电机组':'3号发电机组',
            key1:"",
            key2:"",
            arr:[],
           
            devList:[],
            one:{deviceName:"",remark:"",unit:""},
            two:{deviceName:"",remark:"",unit:""},
            timer:null,
            type:this.$route.query.type,
            data:{kaig:[],moni:[]},
            deptId:this.$route.query.depCode,
            name:null,

        }
    }
}
</script>
<style scoped >
*{
  margin:0;
  padding:0;
}
.el-row {

&:last-child {
margin-bottom: 0;
}
}

.el-col {
height: 100%;
/* border:1px solid; */
border-radius: 0px;
}
.circle{
border: 2px solid black;
width: 10px;
height: 10px;
display: inline-block;
border-radius: 50%;
/* background-color: white; */

font-size: 10px;
}
.bg-purple-dark {
/* background: #99a9bf; */
}
.bg-purple {
/* background: #d3dce6; */
}
.line {
border-right: 2px solid #010101;
display: inline-block;
/* margin-bottom: -12px; */
}

.bg-purple-light {
/* background: #e5e9f2; */
}
.grid-content {
text-wrap:wrap;
font-size:clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem);
}
.diagonal-line {
animation: rotate 1s linear infinite ;
animation-fill-mode:forwards;
animation-iteration-count: 1;
transform-origin: 0 0;
}

@keyframes rotate{
from{
transform: rotate(-40deg);
}
to{
transform: rotate(0deg);
}
}
.diagonal-line1 {
animation: rotate1 0.1s linear infinite ;
animation-fill-mode:forwards;
animation-iteration-count: 1;
transform-origin: 0 0;
}

@keyframes rotate1{
from{
transform: rotate(-0deg);
}
to{
transform: rotate(-40deg);
}
}
.item {
flex: 0 0 auto;
margin: 10px;
}
.row-bg {
padding: 10px 0;
/* background-color: #f9fafc; */
}

.alarmDiv{
display:block;
-webkit-animation-name: imageAnim;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease;
-webkit-animation-play-state: running;
}
@-webkit-keyframes imageAnim{
0% {opacity: 1;}
50% {opacity: 0.5;}
100% {opacity: 0;}
}

</style>
